<template>
  <div class="systemList">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有系统" name="second">
        <sys-suggestion-table></sys-suggestion-table>
      </el-tab-pane>
      <el-tab-pane label="关键系统" name="first">
        关键系统
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import sysSuggestionTable from "./comp/sysSuggestionTable";

export default {
  name: "systemList",
  data() {
    return {
      activeName: 'second'
    }
  },
  components: {
    'sys-suggestion-table': sysSuggestionTable
  },
  methods: {
    // todo 设置 所有系统和关键系统切换时的逻辑
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style>
.systemList .el-tabs__header {
  margin-bottom: 35px;
}
.systemList .el-tabs__nav-scroll {
  height: 62px;
  padding-left: 26px;
}
/*.systemList .el-tabs__active-bar {*/
/*  height: 62px;*/
/*}*/
.systemList .el-tabs__item {
  height: 62px;
  color: #777;
  font-size: 20px;
  line-height: 62px;
  padding-left: 26px;
  padding-right: 29px;
}
.systemList .is-active {
  color: #aaa;
}

/*分割线*/
.systemList .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #1C284B;
}

/*主体表格*/
.systemList .el-tabs__content {
  padding: 0 24px;
}
</style>

<style scoped>

</style>
